哈囉大家好！
接下來要完成的部分就是主頁和紀錄填寫的部分～
前端的UI使用了BootStrap來幫忙美化（雖然看起來還是很陽春XD)

目前的設計是使用者透過Google Account登入按鈕登入後，會引導使用者到紀錄主頁，
之後這個主頁會顯示所有使用者建立的紀錄，點擊單獨的紀錄可以查看每筆紀錄的詳細內容。

建立records主頁/add-new-record頁面component

透過指令建立records component:

ng g component components/records
ng g component components/add-new-record

之後在app-routing.module.ts檔中配置對應的route:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { RecordsComponent } from './components/records/records.component';
import { AddNewRecordComponent } from './components/add-new-record/add-new-record.component';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'records', component: RecordsComponent },
  { path: 'add-new-record', component: AddNewRecordComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

我有寫一個共用的navbar讓其他頁面共用，在records component中可以透過Add按鈕切換到新增頁面：

<app-navbar></app-navbar>

<button type="button" class="btn btn-info" (click)="addNewRecord()">Add</button>

對應ts檔中，在constructor裡面注入Router服務來進行route切換：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-records',
  templateUrl: './records.component.html',
  styleUrl: './records.component.css',
})
export class RecordsComponent {
  constructor(private route: Router) {}

  addNewRecord() {
    this.route.navigate(['/add-new-record']);
  }
}

接著來設計新增紀錄的頁面：

<app-navbar></app-navbar>

<form class="mx-auto p-2">
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label"
      >Person who should pay🥹</label>
    <input
      type="text"
      class="form-control"
      id="itemTitle"
      aria-describedby="titleOfItem"
      placeholder="Enter title of item..."
    />
    <input
      type="text"
      class="form-control"
      id="price"
      aria-describedby="price"
      placeholder="Enter price of item..."
    />
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Person who paid😎</label>
    <input
      type="text"
      class="form-control"
      id="personWhoPaid"
      placeholder="Enter name here!"
    />
    <input
      type="text"
      class="form-control"
      id="paidPrice"
      placeholder="Enter how much u paid in total"
    />
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

目前先完成了最簡單的UI部分XD 明天要趁放假來趕一下進度了～
祝大家都能度過一個愉快的假期